<template>
	<view class="rider-manage">
		<NavBar title="骑手管理"/>
		<view class="content">
			<view class="switch-bar">
				<view 
					@tap="tapSwitch(item.status)" 
					class="switch-item" 
					:class="status==item.status?'a-item':''"
					v-for="item in riderCount"
					:key="item"
				> 
					{{item.name}}
				</view>
			</view>
			<!-- rider list -->
			<view class="rider-list" v-if="riderList.length">
				<view class="rider-item" v-for="item in riderList" :key="item">
					<view class="rider-status">
						<view class="status" :class="item.is_open==1&&item.status==1?'a-status':item.is_open==1&&item.status==0?'':'e-status'"> {{item.is_open==1&&item.status==1?'在线中':item.is_open==1&&item.status==0?'休息中':'禁止接单'}} </view>
						<view class="btn" :class="item.is_open==0?'a-btn':''" @tap="editRiderStatus(item)"> {{item.is_open==1?'禁止接单':'允许接单'}} </view>
					</view>
					<view class="rider-info" @tap="goRiderInfo(item.id, item)">
						<image src="/static/logo.png" class="rider-avatar" />
						<view class="rider-details">
							<view class="rider-name"> {{item.name}} </view>
							<view class="rider-pf">
								<view>好评率：</view>
								<view class="bfb"> <view :style="{width:item.score_y+'%'}"> </view></view>
								<view class="end"> {{item.score_y}}% </view>
							</view>
							<view class="rider-order"> 总订单：{{item.order_num}}单 </view>
						</view>
					</view>
				</view>
			</view>
			<Empty txt="这里空荡荡的~" v-else />
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { GetRiderManageCountApi, GetRiderManageListApi, SetRiderStatusApi } from '@/service/agent.js'
	const status = ref()
	const riderCount = ref([])
	const riderList = ref([])
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref()
	const tapSwitch = (e) => {
		status.value = e
		page.value = 1
		riderList.value = []
		getRiderList()
	}
	const goRiderInfo = (id, info) => {
		uni.navigateTo({
			url: `/pages/agentPages/riderManage/riderInfo/riderInfo?id=${id}&info=${JSON.stringify(info)}`
		})
	}
	const editRiderStatus = (e) => {
		riderList.value = []
		SetRiderStatusApi({id:e.id}).then(res => {
			getRiderCount()
		})
	}
	// 获取顶部数据
	const getRiderCount = () => {
		GetRiderManageCountApi().then(res => {
			riderCount.value = res
			status.value = res[0].status
			getRiderList()
		})
	}
	// 获取骑手列表
	const getRiderList = () => {
		let params = {
			page: page.value,
			page_size: pageSize.value,
			status: status.value
		}
		GetRiderManageListApi(params).then(res => {
			total.value = res.total
			riderList.value.push(...res.data)
		})
	}
	onLoad(() => {
		getRiderCount()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getRiderList()
	})
</script>

<style lang="scss" scoped>
	.rider-manage {
		.content {
			padding: 10px 12px;
			.switch-bar {
				display: flex;
				padding-bottom: 9px;
				.switch-item {
					flex: 1;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					text-align: center;
					&.a-item {
						color: #FF3B1E;
						font-size: 16px;
						font-weight: 500;
						line-height: 19px;
						position: relative;
						&::before {
							position: absolute;
							bottom: -8px;
							left: 50%;
							transform: translateX(-50%);
							display: block;
							content: '';
							width: 30px;
							height: 4px;
							border-radius: 33px;
							background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
						}
					}
				}
			}
			.rider-list {
				padding-top:  10px;
				.rider-item {
					padding: 10px 12px;
					border-radius: 10px;
					background-color: #fff;
					box-sizing: border-box;
					margin-bottom: 10px;
					.rider-status {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 12px;
						border-bottom: 1px solid #eeeeee;
						.status {
							font-weight: 400;
							font-size: 14px;
							color: #999999;
							line-height: 17px;
							&.a-status {
								color: #4CD995;
							}
							&.e-status {
								color: #FF3B1E;
							}
						}
						.btn {
							width: 68px;
							height: 22px;
							color: #333333;
							font-size: 12px;
							font-weight: 400;
							line-height: 22px;
							text-align: center;
							background: #FFFFFF;
							border-radius: 151px;
							border: 1px solid #999999;
							&.a-btn {
								border: none;
								color: #FFFFFF;
								background: #FF3B1E;
							}
						}
					}
					.rider-info {
						display: flex;
						padding-top: 10px;
						.rider-avatar {
							width: 54px;
							height: 54px;
							margin-right: 10px;
							border-radius: 50%;
						}
						.rider-details {
							.rider-name {
								color: #333333;
								font-size: 16px;
								font-weight: 400;
								line-height: 17px;
								margin-bottom: 10px;
							}
							.rider-pf {
								display: flex;
								align-items: center;
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								line-height: 17px;
								margin-bottom: 10px;
								.bfb {
									width: 60px;
									height: 6px;
									background: #DFDFDF;
									border-radius: 146px;
									overflow: hidden;
									view {
										height: 100%;
										background: linear-gradient( 90deg, #FF8508 0%, #FF4847 100%);
									}
								}
								.end {
									color: #999999;
									font-size: 12px;
									font-weight: 400;
								}
							}
							.rider-order {
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								line-height: 17px;
							}
						}
					}
				}
			}
		}
	}
</style>
